<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <div style="position:fixed; width:100%; z-index:999">
      <x-header :left-options="{backText: '',showBack: false}"
                :right-options="{showMore: true}" @on-click-more="showMenusOfAnnouncementActions = true">
                群公告</x-header>
    </div>
    <div style="height: 55px"/>
    <div v-transfer-dom>
      <actionsheet :menus="announcementActions"
                   @on-click-menu="selectAnnouncementAction"
                   v-model="showMenusOfAnnouncementActions" show-cancel></actionsheet>
    </div>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>

    <div class="mainbBg">
      <div style="text-align:center" v-if="!isHaveNotice">
        <label>—— 该群目前没有任何公告 ——</label>
      </div>
      <div class="announcement" v-for="(item, index) in announcementListOfThisGroup" :key="index"
      @click="clickSingleAnnouncement(item)">
        <div v-if="item.isFirst">
          <label style="font-weight:bold; font-size:16px; color:rgb(0,165,224)" v-if="item.isFirst">置顶</label><br>
        </div>
        <span style="color:rgb(128,128,128)">{{item.massage}}</span><br>
        <div style="float:right;">
          <span style="color:rgb(70,83,109); font-size:12px; font-weight:bold">{{item.issuerName}} </span>
          <span style="color:rgb(101,101,101); font-size:12px">发布于 {{item.dateTime}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {XHeader, Actionsheet, TransferDom, Panel, Search, Divider} from 'vux'
  import {XInput} from 'vux'
  import {PopupPicker} from 'vux'
  import {mapState} from 'Vuex'
  import {compareByProp} from 'utilMethods/sort.js'
  import notice from 'api/notice'
  import common from 'utilMethods/common.js'

  export default {
    name: 'G_group_announcement',
    components: {
      XHeader,
      XInput,
      PopupPicker,
      Actionsheet,
      Panel,
      Search,
      Divider
    },
    data () {
      return {
        showMenusOfAnnouncementActions: false,
        isHaveNotice: true,
        alertText: '',
        isShowAlert: false,
        announcementListOfThisGroup: [],
        announcementActions: {
          create: '新建群公告',
        },
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['groupPresent'])
    },
    mounted () {
      this.getAllAnnouncements()
    },
    directives: {
      TransferDom
    },
    watch: {
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      selectAnnouncementAction (value) {
        if ('create' === value) {
          this.$store.commit('stageAnnouncementSelected', {});
          this.$router.push({name: 'G_group_announcement_create_and_modify'});
        }
      },
      clickSingleAnnouncement (announcement) {
        this.$store.commit('stageAnnouncementSelected', announcement);
        this.$router.push({name: 'G_group_announcement_create_and_modify'})
      },
      toAnnouncementDetailPage () {
        /* 待定 */
      },

      async getAllAnnouncements () {
        // 这里的群公告目前未对用户身份进行限制
        const result = await notice.getNoticesByGroupId(this.groupPresent.groupId);
        console.log(result);
        if (result.code === 1) {
          let rawData = result.data;
          if (rawData.length === 0) {
            this.isHaveNotice = false;
          } else {
            rawData.forEach((element) => {
              let elementToShow = element;
              elementToShow.dateTime = common.transferTimeString(element.dateTime).replace('T', ' ');
              this.announcementListOfThisGroup.push(elementToShow);
            })
          }
        }
      },
      judgeUserTypeInGroup (groupInfo, userId) {
        let userTypeInGroup = {}
        if (userId === groupInfo.detail.ownerId) {
          userTypeInGroup = {type: 0, desc: '群主'}
        } else if (groupInfo.detail.adminList.includes(userId)) {
          userTypeInGroup = {type: 1, desc: '管理员'}
        } else {
          userTypeInGroup = {type: 2, desc: '普通群成员'}
        }
        return userTypeInGroup
      },
    }
  }
</script>
<style>
  .announcement {
    display: inline-block;
    width: 85%;
    background-color: white;
    font-family: "微软雅黑";
    font-size: 15px;
    word-wrap: break-word;
    padding: 5px 5px;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 10px;
    border-radius: 2%;
  }
</style>